<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image src="http://img.cpgm.cc/panda/static/invite/title3.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<p class="p1">宝箱有几率开出以下分红人物，可每日领取分红</p>
			<p class="p2">(分红金额是随着平台人数增长和平台收益来定的，只会越来越高!)</p>
			<view class="list">
				<view class="item" v-for="(item , index) in list" :key="index" v-if="item.type == 1">
					<view class="posa" :class="[item.num > 0 ?'active':'']">{{item.num > 0 ?'已拥有:':'未获得'}} <text v-if="item.num > 0">{{item.num}}个</text> </view>
					<view class="cont">
						<image :src="imgurl + item.img" mode="widthFix" />
						<h3>{{item.name}}</h3>
						<p>每日分红<text>{{bouns[item.id].explain}}</text> 银元</p>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_bonus?'gre':'']" @click="invitebonus(item)">{{!!item.is_bonus?'已领取':'领取分红'}}</u-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 确定开宝箱弹窗 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image class="masktit" src="http://img.cpgm.cc/panda/static/invitebox/masktit.png" mode="widthFix" />
					<view class="m_tit">恭喜您成功领取</view>
					<view class="name">{{name}}每日分红</view>
					<image class="renimg" :src="imgurl + rwimg" mode="widthFix" />
					<view class="m_con"><text>{{price}}</text>银元</view>
					<view @click="show = false" class="button confirm">开心收下</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000',
				},
				list:'',
				imgurl: config.imgurl,
				bouns:[
					{},
					{
						id:1,
						explain:'100'
					},
					{
						id:2,
						explain:'0.01~5'
					},
					{
						id:3,
						explain:'0.02~10'
					},
					{
						id:4,
						explain:'0.05~20'
					},
					{
						id:5,
						explain:'0.1~50'
					},
					{
						id:6,
						explain:'0.2~100'
					},
					{
						id:7,
						explain:'0.5~300'
					},
					{
						id:8,
						explain:'1~600'
					},
					{
						id:9,
						explain:'2~1000'
					},
					{
						id:10,
						explain:'1'
					},
					{
						id:11,
						explain:'5'
					},
					{
						id:12,
						explain:'18'
					},
					{
						id:13,
						explain:'68'
					},
					{
						id:14,
						explain:'188'
					},
					{
						id:15,
						explain:'388'
					},
					{
						id:16,
						explain:'999'
					},
					{
						id:17,
						explain:'1888'
					},
					{
						id:18,
						explain:'188'
					},
					{
						id:19,
						explain:'88'
					},
					{
						id:20,
						explain:'38'
					},
					{
						id:21,
						explain:'18'
					},
					{
						id:22,
						explain:'5'
					},
					{
						id:23,
						explain:'3'
					},
					{
						id:24,
						explain:'1'
					},
					{
						id:25,
						explain:'1888'
					},
					{
						id:26,
						explain:'1888'
					},
					{
						id:27,
						explain:'666'
					},
					{
						id:28,
						explain:'666'
					},
					{
						id:29,
						explain:'6666'
					},
					{
						id:30,
						explain:'6666'
					},
					{
						id:31,
						explain:'6666'
					},
					{
						id:32,
						explain:'666'
					},
					{
						id:33,
						explain:'6666'
					}
				],
				show:false,
				rwimg:'',
				price:'',
				name:'',
			};
		},
		onLoad(){
			this.myPics();
		},
		methods: {
			// 获取我的图鉴
			async myPics (){
				let res = await this.$http.index.myPics({
					type:1
				});
				this.list = res.data
			},

			// 获取分红方式文字
			getexplain(id){
				if( 1<id < 10) {
					return '每日分红'
				}else if( 9< id < 18){
					return '每日固定分红'
				}else {
					return '可兑换'
				}
			},

			// 领取分红
			async invitebonus(item){
				this.name = item.name
				this.rwimg = item.img
				if(!!item.is_bonus) {
					this.$u.toast('今日已领取')
				}else {
					let res = await this.$http.index.invitebonus({
						id:item.id
					});
					if(res.code == 1) {
						this.price = res.data
						this.show = true
						this.myPics();
					}else {
						this.$u.toast(res.msg)
					}
				}
			},

		},
	}
</script>

<style lang="less">

.zone {
	background: #000;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: flex-end;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
				width: 35%;
				margin-left: 5px;
			}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.main {
		padding: 10px;
	}

	.p1 {
		color: #fff;
		font-size: 14px;
	}

	.p2 {
		color: #FEE1C3;
		font-size: 12px;
	}

	.list {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;

		.item {
			width: 48%;
			position: relative;
			background: linear-gradient(180deg, #F2E0FF 0%, #FFFFFF 100%);
			border-radius: 7px;
			padding: 10px;
			overflow: hidden;
			margin-bottom: 12px;

			.button {
				width: 80%;
				height: 45px;
				color: #fff;
				background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
				border-radius: 5px;
			}
		}

		.posa {
			position: absolute;
			top: 0;
			left: 0;
			padding: 2px 5px;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 6px 0px 5px 0px;
			font-size: 12px;
		}

		.active {
			color: #fff;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%) !important;
		}

		.cont {
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 80%;
			}

			h3 {
				color: #000;
				font-size: 14px;
			}

			p {
				color: #343434;
				font-size: 12px;
				margin: 10px 0;
				text {
					color: #FE431A;
				}
			}
		}
	}



// 领取奖励弹窗

.maskbox {
	background: linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 50px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.masktit {
		width: 40%;
		position: absolute;
		top: -60px;
	}


	.m_tit {
		color: #000000;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		margin-top: 20px;
	}

	.m_con {
		color: #343434;
		font-size: 14px;
		margin-top: 10px;

		text {
			font-size: 35px;
			font-weight: bold;
			color: #343434;
			line-height: 72px;
			background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%), linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.confirm {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		width: 80%;
		height: 50px;
		color: #fff;
		font-size: 14px;
		margin-top: 10px;
	}
	
}

.gre {
	filter: grayscale(1);
}

.renimg {
	width: 75%;
}

.name {
	font-size: 20px;
	font-weight: 600;
	color: #000000;
	line-height: 33px;
	background: linear-gradient(180deg, #FF456B 0%, #FE5C4F 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 10px;
}


</style>
